<template>
  <span>{{ text }}</span>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue';
import { date } from 'quasar';
const weekNames = {
  'en-US': [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday',
  ],
  'zh-CN': [
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六',
    '星期日',
  ],
};

const time = ref(date.formatDate(new Date(), 'YYYY/MM/DD HH:mm:ss'));

const text = computed(() => {
  const lang: 'en-US' | 'zh-CN' = 'zh-CN';
  new Date();
  const weekday = date.getDayOfWeek(new Date());

  return `${time.value} ${weekNames[lang][weekday > 0 ? weekday - 1 : 6]}`;
});

const timerId = setInterval(() => {
  time.value = date.formatDate(new Date(), 'YYYY/MM/DD HH:mm:ss');
}, 1_000);

onBeforeUnmount(() => {
  clearInterval(timerId);
});
</script>
